﻿@{
    Layout = null;
    //奖品id
    var jid = ViewBag.jid;
    //  类型1红包2优惠券3流量包
    var type = ViewBag.type;
    //优惠券类型0代金券1折扣券枚举在程序中存在红包类型手气红包0普通红包1
    var couponType = ViewBag.couponType; 
   
}



<script src="~/Scripts/Echart/echarts-all.js"></script>

<style>
    .myTabs.nav-tabs > li.active > a, .myTabs.nav-tabs > li.active > a:focus, .myTabs.nav-tabs > li.active > a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }
    .myTabs.nav-tabs {
        position:relative;

    }
    .big {
        margin: 0 15px;
    }

        .big p {
            margin: 0;
        }

        .big .result-title {
            background-color: #F2F2F2;
            height: 46px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

            .big .result-title span {
                flex: 1;
                text-align: center;
                font-size: 15px;
            }

                .big .result-title span:nth-child(1) {
                    flex: 2;
                }

        .big .result-con {
            display: flex;
            align-items: center;
            margin: 15px 0;
        }

            .big .result-con > div.red-con {
                flex: 2;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .big .result-con > div.red-con > div:nth-child(1) {
                    padding: 10px 2px 10px 10px;
                    background-color: #EE5F51;
                    color: white;
                    border-radius: 5px;
                    margin-right: 20px;
                    flex: 1;
                }

                .big .result-con > div.red-con > div:nth-child(2) {
                    min-width: 120px;
                }

                .big .result-con > div.red-con > div:nth-child(1) > p:nth-child(2) span {
                    font-size: 14px;
                }

            .big .result-con > span, .big .result-con > a {
                flex: 1;
                text-align: center;
            }

    #pieChooce {
        position: absolute;
        left: 35%;
        bottom: -106%;
        z-index:999999;
    }
    #lineChooce {
        position: absolute;
        right: 2%;
        bottom: -106%;
        z-index: 999999;
    }

    /*.rp-use {
        display: flex;
        align-items: center;
        justify-content: center;
    }*/
</style>
@*中奖明细*@

<div class="big">
    <div id="JackpotModel" binding="{ 'pageCallback':'$.MGJ.JackpotManage.Ajax_GetJackpotModel' }">
        <div class="result-con">
            <div class="red-con">
                <div>
                    <div id="nameType"> </div>
                    <p><span>￥</span><span binding="{'text':'TotalMoney'}" style="font-size:30px"></span>  </p>
                    @*服务器代码判断*@
                    <p> 
                @{
                    
                    if (type == 1 && couponType==1)
                    {
                      <span>￥</span><span binding="{'text':'Denomination'}"></span>
                    }
                    else
                    {
                         <span binding="{'text':'MinDenomination'}"></span><span>- ￥</span><span binding="{'text':'MaxDenomination'}"></span>
                    }
                    
                }
                        </p>
                
                    
         
                </div>
                <div>
                    <p>创建人：<span binding="{'text':'ChangeLoginName'}"></span> </p>
                    <p style="color: #EAEDF1;height:16px;width:100px"></p>
                    <p style="color: #EAEDF1;height:16px;width:100px"></p>
                    <p>
                        <span style="color: #EE5F51">已启用 </span>
                        @*<span style="color: #50AE55" class="empower">立即授权</span>*@
                    </p>
                </div>
            </div>
            <span><div>发放总数量：<span binding="{'text':'TotalNums'}"></span></div> <div> 剩余总数量：<span binding="{'text':'ResidueNums'}"></span></div></span>
            <span><div>预算总金额：<span binding="{'text':'TotalMoney'}"></span></div><div>剩余总金额：<span binding="{'text':'ResidueMoney'}"></span></div></span>
            <span binding="{'text':'Remark'}"></span>
        </div>
    </div>
    <ul class="myTabs nav nav-tabs" role="tablist" style="display:flex;align-items:center;border-bottom:none">
        <li role="presentation" class="active">
            <a href="#rp-use" role="tab" data-toggle="tab" aria-controls="rp-use" aria-expanded="true">红包发放与使用情况</a>
        </li>
        <li role="presentation" class="">
            <a href="#rp-record" role="tab" data-toggle="tab" aria-controls="rp-record" aria-expanded="false">红包发放记录</a>
        </li>
        <li role="presentation" class="">
            <a href="#about-activity" role="tab" data-toggle="tab" aria-controls="about-activity" aria-expanded="false">关联活动</a>
        </li>
        <li id="pieChooce">
            <input id="money" type="radio" name="chooceType" value="M" checked onclick="PieChooce(this.value)" />
            <label for="money" id="moneyfor">金额</label>
            <input id="num" type="radio" name="chooceType" value="N" onclick="PieChooce(this.value)" />
            <label for="num" id="numfor">数量</label>

        </li>
        <li id="lineChooce">
            <input id="7day" type="radio" name="lineType" value="7" checked onchange="LineChooce(this.value)" />
            <label for="7day">近7天</label>
            <input id="30day" type="radio" name="lineType" value="30" onchange="LineChooce(this.value)" />
            <label for="30day">近30天</label>
        </li>
    </ul>





    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade active in " id="rp-use" aria-labelledby="rp-use-tab">
            <div class="row">
                <div id="pie" class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="height:350px;">
                </div>
                <div id="line" class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="height: 350px;">
                </div>
            </div>

        </div>
        <div role="tabpanel" class="tab-pane fade  in " id="rp-record" aria-labelledby="rp-use-tab">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th class="text-center">头像</th>
                        <th class="text-center">用户微信名</th>
                        <th class="text-center">领奖防伪码</th>
                        <th class="text-center">活动名称</th>
                        <th class="text-center">获得奖项</th>
                        <th class="text-center">金额获利</th>
                        <th class="text-center">领奖时间</th>
                        <th class="text-center">手机号码</th>
                    </tr>
                </thead>
                <tbody id="Thewinning" style="display:none;" binding="{'pageId':'ShoppingPager','pageCallback':'$.MGJ.JackpotManage.Ajax_Thewinning','emptyHtml':recordHtml}">
                    <tr>
                        <td><img binding="{'src':'HeadImgUrl'}" style="max-width:30px;" /></td>
                        <td binding="{'text':'Nickname','textHandle':$.MGJ.JackpotManage.Bin_Base64Nickname}"></td>
                        <td binding="{'text':'Code'}"></td>
                        <td binding="{'text':'Title'}"></td>
                        <td binding="{'text':'Name'}"></td>
                        <td binding="{'text':'Denomination'}"></td>
                        <td binding="{'text':'Time','textHandle':'datetime'}" data-toggle="tooltip"></td>
                        <td binding="{'text':'Phone'}" data-toggle="tooltip"></td>
                    </tr>
                </tbody>
            </table>
            <div id="ShoppingPager"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade  in " id="about-activity" aria-labelledby="rp-use-tab">
            <table class="table table-hover table-bordered" style="text-align:center">
                <thead>
                    <tr>
                        <th width="15"><input type="checkbox" class="AllClickCheckbox"></th>
                        <th>活动名称</th>
                        <th>活动码批次</th>
                        <th>活动开始</th>
                        <th>活动结束</th>
                        <th>活动规则</th>
                        <th>活动区域</th>
                        <th>数量</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="GetJackpot_Activity" style="display:none;" binding="{'pageId':'ShoppingPager2','pageCallback':'$.MGJ.JackpotManage.Ajax_GetJackpot_Activity','emptyHtml':relevancyHtml}">
                    <tr>
                        <td><input type="checkbox"></td>
                        <td binding="{'text':'Title'}"></td>
                        <td binding="{'text':'Batch'}"></td>
                        <td binding="{'text':'StartDate','textHandle':'datetime'}"></td>
                        <td binding="{'text':'EndDate','textHandle':'datetime'}"></td>
                        <td binding="{'title':'RuleExplain'}">
                            <textarea class="form-control" binding="{'text':'RuleExplain'}"></textarea>
                        </td>
                        <td binding="{'text':'ActivityRegion'}" data-toggle="tooltip"></td>
                        <td binding="{'text':'totalNums'}" data-toggle="tooltip"></td>
                        <td binding="{'text':'ViewFlag','textHandle':$.MGJ.JackpotManage.Bin_ViewFlag}" data-toggle="tooltip"></td>
                    </tr>
                </tbody>

            </table>
            <div id="ShoppingPager2"></div>
        </div>
    </div>
</div>
<script>
    var ColspanNub = $(".table.table-hover.table-bordered").find("tr").children("td").length
    window.relevancyHtml = '<tr><td colspan="' + ColspanNub + '"><p class="no-result">无符合条件的数据结果</p></td></tr>';
    window.recordHtml = '<tr><td colspan="' + ColspanNub + '"><p class="no-result">无符合条件的数据结果</p></td></tr>';
        $.MGJ.JackpotManage.Ajax_GetJackpotModel("@jid");

    $('.myTabs a[data-toggle="tab"][role="tab"]').on('shown.bs.tab', function (e) {
        if ($(e.target).text() === "红包发放与使用情况") {
            $('#moneyfor').click();
            line(7);
            $('#pieChooce').css('display', 'block').next().css('display', 'block');
        
        }
        else if ($(e.target).text() === "红包发放记录") {
            $('#pieChooce').css('display', 'none').next().css('display', 'none');
            $.MGJ.JackpotManage.Ajax_Thewinning(1, "@jid");
          
        }
        else {
            $('#pieChooce').css('display', 'none').next().css('display', 'none');
            $.MGJ.JackpotManage.Ajax_GetJackpot_Activity("@jid");
        }
    })
    
    function PieChooce(val) {
        pie(val);
    }
    function LineChooce(val) {
        line(val);
    }
    function pie(val) {
        var pieCon = echarts.init(document.getElementById('pie'));
        pieCon.showLoading({
            text: '正在努力的读取数据中...',    //loading话术
        });
        $.ajax({
            type: 'post',
            url: '/Market/GetJackpotSendResidue',
            dataType: 'json',
            data: { jId: "@jid" },
            success: function (r) {
            
                var alreadySend = 0;
                var notSend = 0;
                var flag = '';
                var flag1 = '';
                if(val=='M')
                {
                    if (alreadySend==0)
                    {
                        alreadySend = r.sendMoney;
                        notSend = (r.TotalMoney - r.sendMoney).toFixed(2);
                    }
                    else {
                        alreadySend = r.sendMoney.toFixed(2);
                        notSend = (r.TotalMoney - r.sendMoney).toFixed(2);
                    }
                  
                    
                    flag1= '金额';
                    flag = '元';
                    if (alreadySend == null)
                    {
                        alreadySend = 0;
                    }
                }
                else {
                    alreadySend = r.sendCount;
                    notSend = r.TotalNums - r.sendCount;
                    flag1 = '数量';
                    flag = '个';
                }
            
                //总金额 TotalMoney 总数量 TotalNums  已发放金额：sendMoney  已发放数量 sendCount
                var option = {
                    title: {
                        text: '红包发放情况',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}"
                    },
                    legend: {
                        show:false,
                        x: 'left',
                        data: ['已发放', '未发放'],
                        textStyle: { color: 'auto' }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '红包情况',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                { value: alreadySend, name: '已发放' + flag1 + alreadySend + flag },
                                { value: notSend, name: '未发放' + flag1 + notSend + flag },
                            ]
                        }
                    ]
                };
                pieCon.setOption(option);
                pieCon.hideLoading();
            }
        })
    }
    pie('M');

    function line(day) {
        var lineCon = echarts.init(document.getElementById('line'));
        lineCon.showLoading({
            text: '正在努力的读取数据中...',    //loading话术
        });
     
        $.ajax({
            type: 'post',
            url: '/Market/GetJackpotSendNumList',
            data: { jId: "@jid", type: 1, dayNum: day },
            success: function (r) {
                var arr = [];
                var Day = [];
            
                if (r.length < 1)
                {
                  
                    arr.push(0);
                    Day.push(new Date().toLocaleDateString());//2017-12-12
                    //Day.push(new Date().toLocaleString());// 2017-12-12 下午 8:22:22
                    //Day.push(new Date().toLocaleTimeString());//下午 8:22:22
                    //lineCon.showLoading({
                    //    text: '暂时没有产生数据...',    //loading话术
                    //});
                }
            
                else {
                    $(r).each(function (i, ele) {
                        arr.push(ele.sendSumMoney);
                        Day.push(ele.SendTime);
                    })
                }
                var lineOption = {
                    title: {
                        text: '每月红包金额发放情况',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [day + '天内红包情况']
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            data: Day
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        }
                    ],
                    series: [
                        {
                            name: day + '天内红包情况',
                            type: 'line',
                            //data: [11, 11, 15, 13, 12, 13, 10],
                            data: arr,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                lineCon.setOption(lineOption);
                lineCon.hideLoading();
    
              

            }
        })
    }
    line(7);
    function decode(input) {
        _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length) {
            enc1 = _keyStr.indexOf(input.charAt(i++));
            enc2 = _keyStr.indexOf(input.charAt(i++));
            enc3 = _keyStr.indexOf(input.charAt(i++));
            enc4 = _keyStr.indexOf(input.charAt(i++));
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
            output = output + String.fromCharCode(chr1);
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }
        output = _utf8_decode(output);
        return output;
    }
    function _utf8_decode(utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
        while (i < utftext.length) {
            c = utftext.charCodeAt(i);
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
        }
        return string;
    }
</script>
